<template>
  <div id="map" style=" width: 100%;height:10rem;margin:1px;">
  </div>
</template>

<script>
import L from 'leaflet'
import features from '../../../assets/static/hubei.json'
import simpleHubei from '../../../assets/static/hubeiSimple.json'
import mufu from '../../../assets/static/shengtaiguankong/shuitubaochi/mufu.json'

export default {
  data(){
    return {
      map: ""
    }
  },
  components: {

  },
  methods: {
    addmap() {
      let tianditu = L.supermap.tiandituTileLayer({
        // key: "d9961c5cd1d22dfd80f3984e44cd2478",
        key: "3352a450f393157074884346f937c47d",
        // key: "e455500d170d9a5b5b3bf85a5b323dbf",
        layerType: "img",
        noWrap: false,
      })
      // 初始化地图信息
      this.map = L.map('map', {
        center: [0,0],
        zoomControl:false,
        crs: L.CRS.TianDiTu_WGS84,
        dragging: true,
        doubleClickZoom: false,
        // layers: [tianditu, rivers, sections,basins, dams],
        layers: [tianditu],
        attributionControl: false,
        zoom: 8
      }).setView([29.9078, 114.17559], 9);
      let tiandituLabel = L.supermap.tiandituTileLayer({
        isLabel: true,
        // key: "d9961c5cd1d22dfd80f3984e44cd2478"
        key: "3352a450f393157074884346f937c47d"
        // key: "e455500d170d9a5b5b3bf85a5b323dbf"
      }).addTo(this.map);

      L.control.zoom({
        zoomInTitle:"放大",
        zoomOutTitle:'缩小',
      }).addTo(this.map);
      //在地图上添加湖北省边界
      let style = {
        "color": "#0066FF", //边框颜色
        "weight": 2, //边框粗细
        "opacity": 0.7, //透明度
        "fillColor": 'red', //区域填充颜色
        "fillOpacity": 0, //区域填充颜色的透明
      };
      L.geoJSON(features,{style:style}).addTo(this.map);
      //绘制斧头湖保护区边界
      let style2 = {
        "color": "#0066FF", //边框颜色
        "weight": 3, //边框粗细
        "opacity": 1, //透明度
        "fillColor": '#0066FF', //区域填充颜色
        "fillOpacity": 0.5, //区域填充颜色的透明
      };
      L.geoJSON(mufu,{style:style2}).addTo(this.map);

      //画出没有匹配的区域，对其进行遮罩处理
      let _this = this;
      _this.drawShadowBound(simpleHubei.features[0].geometry.coordinates);
    },
    drawShadowBound(coordinates,boundData){
      /*画遮蔽层的相关方法
     *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
     *      这样就做出了一个经过多次西北角的闭合多边形*/
      //定义中国东南西北端点，作为第一层
      let pNW = {lat: 59.0, lng: 73.0};
      let pNE = {lat: 59.0, lng: 136.0};
      let pSE = {lat: 3.0, lng: 136.0};
      let pSW = {lat: 3.0, lng: 73.0};
      // let pNW = {lat: 90, lng:-180};
      // let pNE = {lat: 90, lng:180 };
      // let pSE = {lat: -90, lng: -180};
      // let pSW = {lat:90, lng:180};
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      let pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);
      //循环添加各闭合区域
      for (let i = 0; i < coordinates.length; i++) {
        let points = [];
        let item1 = coordinates[i]
        for(let j = 0, l1=item1.length; j<l1; j++){
          let item2 = item1[j]
          for(let k = 0, l2 = item2.length; k<l2; k++){
            let item3 = item2[k]
            points.push({lat: item3[1], lng: item3[0]});
          }
        }
        //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
        pArray = pArray.concat(points);
        pArray.push(pArray[0]);
      }
      //添加遮蔽层
      let plyall = L.polygon(pArray, {color: 'transparent', fillColor: '#282525', fillOpacity: 0.8}); //建立多边形覆盖物
      //let plyall = L.polygon(pArray, {color: '#282525', fillColor: 'transparent', fillOpacity: 0.5}); //建立多边形覆盖物
      plyall.addTo(this.map);
    }
  },
  created() {
  },
  mounted() {
    this.addmap();
  }
}
</script>

<style scoped>

</style>
